interview

Home / DeveloperSection / Interviews / What are computed observables in Knockout.js?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

27-Jun-2024

Knockout.js Computed Observable

The objects calculated in Knockout.js are unique view objects that update themselves whenever any of the clients changes. It is used to get or calculate values ​​based on other visible or explicit JavaScript attributes in your visualization. Here is a detailed explanation:

Definition

Computed observables (ko.computed()) in Knockout.js are functions that compute a value based on other observables or simple JavaScript properties. They are automatically updated every time a care is due based on changes.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Computed observable Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js Computed observable</h2>
        <p>First Name: <span data-bind="text: firstName"></span></p>
        <p>Last Name: <span data-bind="text: lastName"></span></p>
        <p>Full Name: <span data-bind="text: fullName"></span></p>

    </div>
    
    <script>

        function AppViewModel() {
            this.firstName = ko.observable('John');
            this.lastName = ko.observable('Doe');
            // knockout.js computed observable
            this.fullName = ko.computed(function() {
                 return this.firstName() + ' ' + this.lastName();
            }, this);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel()); 

    </script>
</body>
</html>

In this example, 

fullName is a numeric observable based on firstName and lastName. Whenever firstName or lastName changes, fullName automatically computed its value (this.firstName() + ' ' + this.lastName();).

Output-

answer 6518922706073219

Also, Read: Explain the role of observables and computed observables in Knockout.js?

MindStick Training

Liked By